<template>
  <div class="form-extra-comment">
    <div v-loading="loading" ref="infiniteBody" class="form-extra-comment-main">
      <div class="form-extra-comment-list">
        <div v-for="(item, i) in list" :key="i" class="form-extra-comment-item">
          <div class="form-extra-comment-item-main">
            <el-avatar :size="24" :src="define.comUrl + item.creatorUserHeadIcon" class="comment-avatar" />
            <div class="comment-content">
              <div class="comment-head">
                <p class="username">
                  {{ item.creatorUser }}
                  <span v-if="item.replyUser">
                    <span class="replay-separate">回复</span>
                    {{ item.replyUser }}
                    <el-tooltip placement="top">
                      <div slot="content"><span v-html="item.replyText"></span></div>
                      <i class="icon-ym icon-ym-chat"></i>
                    </el-tooltip>
                  </span>
                </p>
              </div>
              <p class="comment-text" v-html="item.isDel == 2 ? '该评论已被删除' : item.text"></p>

              <div class="comment-other" v-if="item.isDel != 2 && ((item.imageList && item.imageList.length) || (item.fileList.length && item.fileList.length))">
                <div class="comment-img-list" v-if="item.imageList.length">
                  <el-image
                      v-for="(cItem, ci) in item.imageList"
                      :key="ci"
                      :src="define.comUrl + cItem.url"
                      class="comment-img-item"
                      :preview-src-list="getImgList(item.imageList)" :z-index="10000">
                  </el-image>
                </div>
                <div class="comment-file-List" v-if="item.fileList.length">
                  <jnpf-upload-file v-model="item.fileList" :disabled="true" :statusLabel="false" detailed />
                </div>
              </div>

              <div class="comment-actions">
                <span class="time">{{ jnpf.dateFormat(item.creatorTime, 'YYYY-MM-DD HH:mm:ss') }}</span>
                <div v-if="item.isDel != 2">
                  <el-button type="text" style="color: red;" @click="handleDel(item.id)" v-if="item.isDel == 1">删除</el-button>
                  <el-button type="text" class="ml-10px" @click="handleReply(item, i)">回复</el-button>
                </div>
              </div>
            </div>
          </div>
          <CommentInput inner :taskId="taskId" :replyId="item.id" v-if="item.commentActive"  @hideCommentInput="hideCommentInput" @reload="init" :index="i"/>
        </div>
      </div>
    </div>
    <div class="form-extra-comment-list-footer">
       <CommentInput :taskId="taskId" @reload="init" />
    </div>

    <Preview :visible.sync="previewVisible" :file="activeFile" :showDownload="true" />
  </div>
</template>


<script>

import { getCommentList, delComment } from '@/api/workFlow/FlowEngine'
import Preview from '@/components/Jnpf/Upload/Preview.vue'
import CommentInput from './CommentInput.vue'
import emojiList from 'static/emoji.json';

export default {
  name: 'CommentList',
  components: { Preview, CommentInput},
  props: {
    taskId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      list:[],
      loading: false,
      previewVisible:false,
      emojiList: emojiList,
      activeFile: {
        fileId: '',
        name: '',
        url: '',
        fileVersionId: ''
      },
      listQuery:{
        currentPage: 1,
        pageSize: 100000,
        sort: 'desc',
        sidx: '',
      },
      subInput: {

      }
    }
  },
  watch: {},
  computed: {},
  created() {
    this.init();
  },
  methods: {
    handleReply(item, index) {
      item.commentActive = true;
      for (let i = 0; i < this.list.length; i++) {
        if (i != index) {
          this.list[i].commentActive = false;
        }else{
          this.$set(this.list, index, item);
        }
      }
    },
    hideCommentInput(index) {
      for (let i = 0; i < this.list.length; i++) {
        if (i == index) {
          let item = this.list[i];
          item.commentActive = false;
          this.$set(this.list, index, item);
        }
      }
    },
    handleDel(id) {
      this.$confirm('确定删除该评论？', '确认删除', {
        type: 'warning'
      }).then(() => {
        delComment(id).then(res => {
          this.init();
          this.$message({
            type: 'success',
            message: res.msg
          })
        })
      }).catch(() => { });
    },
    handlePreview(row) {
      console.log(row, "row")
      this.activeFile.name = row.fullName;
      this.activeFile.fileId = row.filePath;
      this.activeFile.fileVersionId = null;
      this.activeFile.url = row.url;
      this.previewVisible = true;
    },
    getImgList(list) {
      const newList = list.map(o => this.define.comUrl + o.url)
      return newList
    },
    replaceEmoji(str) {
      if (!str) return '';
      //替换表情符号为图片
      let replacedStr = str.replace(/\[([^(\]|\[)]*)\]/g, (item, index) => {
        let obj = '';
        for (let i = 0; i < this.emojiList.length; i++) {
          let row = this.emojiList[i];
          if (row.alt == item) {
            let url = require(`static/emoji/${row.url}`)
            obj = `<img src="${url}" class="chatList-text-emoji" />`
            break
          }
        }
        return obj;
      });
      str = replacedStr;
      return str;
    },
    init() {
      if (!this.taskId) return;
      this.loading = true;
      const query = { ...this.listQuery, taskId: this.taskId };
      getCommentList(query).then(res => {
        const list = res.data.list.map(o => ({
          ...o,
          text: this.replaceEmoji(o.text),
          replyText: this.replaceEmoji(o.replyText),
          fileList: o.file ? JSON.parse(o.file) : [],
          imageList: o.image ? JSON.parse(o.image) : [],
          // creatorTime: formatToDateTime(o.creatorTime),
          creatorTime: o.creatorTime,
        }));
        this.list = list;
        this.list.forEach((item, index) => {
          this.subInput[index] = false
        })
        this.loading = false;
      }).catch(() => {
          this.loading = false;
      });
    }

  }
}
</script>

<style lang="scss" scoped>

.form-extra-comment {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.form-extra-comment-main {
  flex: 1;
  overflow: auto;
}

.form-extra-comment-list-footer {
  flex-shrink: 0;
  border-top: 1px solid #DCDFE6;
}

.form-extra-comment-list {
  padding: 0 20px;
}

.time {
  flex-shrink: 0;
  color: #606266;
  font-size: 14px;
}

.comment-actions {
  margin-top: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .el-button {
    padding: 0;
    font-size: 12px;
  }
}

.form-extra-comment-item {
  padding: 20px 0;
  border-bottom: 1px solid #DCDFE6;

  &:last-child {
    border-bottom: unset;
  }
  .form-extra-comment-item-main {
    display: flex;
    .comment-avatar {
      flex-shrink: 0;
      margin-right: 12px;
    }
    .comment-content {
      flex: 1;
      min-width: 0;
      .comment-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 12px;
        line-height: 16px;
        margin-bottom: 10px;
        .username {
          flex: 1;
          min-width: 0;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          .replay-separate {
            margin: 0 5px;
            color: #606266;
          }
          i {
            margin-left: 5px;
            line-height: 16px;
            vertical-align: 0;
            font-size: 14px;
            color: #606266;
            cursor: pointer;
          }
        }

      }
      .comment-text {
        font-size: 12px;
        line-height: 24px;
        color: #606266;
        vertical-align: middle;
        word-break: break-all;
        .comment-text-emoji {
          display: inline-block;
          vertical-align: middle;
        }
      }
      .comment-other {
        padding: 8px 4px 2px 4px;
        background-color: #f4f4f4;
        margin-top: 12px;
        border-radius: 4px;
      }
      .comment-img-list {
        .comment-img-item {
          display: inline-block;
          width: 40px;
          height: 40px;
          cursor: pointer;
          overflow: hidden;
          margin: 0 6px 6px 0;
          object-fit: cover;
        }
      }
      .comment-file-List {
        margin-bottom: 8px;
        .anticon-download {
          right: 5px;
        }
        .anticon-eye {
          right: 25px;
        }
      }

    }
  }
}

</style>
